/* 修改输入框 */
::v-deep .el-input__wrapper {
    border-radius: 0;
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1) !important;
    padding-left: 0px;
    padding-right: 0px;
    font-size: 13px;
}

/* 去掉el-tags下划线 */
::v-deep .el-tabs__nav-wrap::after {
    position: static !important;
}

::v-deep .el-form-item__error {
    font-size: 13px;
    margin-top: 3px;
}

::v-deep .el-tabs__content {
    margin-top: 20px;
}

::v-deep .el-input-group__prepend {
    background-color: white;
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1) !important;
    padding: 0px;
    border-radius: 0;
}

::v-deep .el-input-group__append {
    padding: 0px;
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1) !important;
    background-color: white;
    cursor: pointer;
    border-radius: 0px;
}

::v-deep .el-input__inner{
    font-weight: 100;
}

#login-page {
    font-size: 13px;
    width: 100%;
    height: 100%;
    background-image: url('@/assets/backgroundImage.png');
    background-size: cover;

    .top-part {
        width: 100%;
        height: 20%;

        .header-container {
            margin: 0 auto;
            height: 100%;
            max-width: 580px;
            position: relative;
            animation-name: example2;
            animation-duration: 1s;  
            animation-fill-mode: forwards;

            .info-top {
                width: 100%;
                height: 70px;
                text-align: center;
                font-size: 30px;
                position: absolute;
                font-weight: bold;
                bottom: 20%;
                color: rgb(2, 119, 208);
            }

            .info-bottom {
                width: 100%;
                text-align: center;
                font-size: 13px;
                position: absolute;
                bottom: 10%;
            }
        }
    }

    .center-part {
        width: 100%;
        height: 55%;
        position: relative;
        animation-name: example1;
        animation-duration: 1s;  
        animation-fill-mode: forwards;


        .login-container {
            margin: 0 auto;
            width: 550px;
            height: 320px;
            justify-content: space-around;
            display: flex;
            background-color: rgb(233, 233, 233);
        
            .left-part {
                width: 44.5%;
                height: 100%;
                background-color: white;
            }

            .right-part {
                width: 55%;
                height: 100%;
                padding: 10px 20px;
                background-color: white;
                position: relative;

                .login-btn {
                    height: 30px;
                    width: 100%;
                    font-size: 13px;
                    font-weight: 100;
                    margin-top: 20px;
                    background-color: rgb(2, 119, 208);
                }

                .login-btn:hover {
                    background-color: #0063e4;
                }

                .forget-password {
                    width: 100%;
                    text-align: right;
                    padding-right: 10px;
                    font-size: 13px;
                    color: rgb(2, 119, 208);

                    span {
                        color: rgb(47, 47, 47);
                        cursor: pointer;
                    }

                    span:hover {
                        color: #acacac;
                    }
                }

                .tips {
                    margin-top: 25px;
                    color: rgb(137, 141, 145);
                    position: absolute;
                    bottom: 10%;
                    padding-right: 10px;
                    font-size: 10px;
                }

                .code-button {
                    font-size: 13px;
                    padding: 0 5px;
                    color: rgb(2, 119, 208);
                }

                .code-button:hover {
                    color: #acacac;
                }

            }
        }
    }


    .bottom-part {
        width: 100%;
        height: 25%;
    }
}

@keyframes example1 {
    from {
        top: 120px;
    }

    to {
        top: 0px;
    }
}


@keyframes example2 {
    from {
        top: -60px;
    }

    to {
        top: 0px;
    }
}